<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="true">
    <!-- 头部区域 -->
    <div class="dp_top">
      <!-- 返回、天气 -->
      <div class="dt_back_weather">
        <img
          class="dbw_fh"
          src="../../../assets/largescreen/new/top_back.png"
          alt=""
          @click="goBack"
        />
        <div class="dbw_tianqi">
          <img :src="qihouimg" />
          <div class="tianqi">{{ tianqi }} {{ wendu }}℃</div>
        </div>
      </div>
      <!-- 类型 -->
      <div class="dt_type dt_type_ykhx" @click="toTurn(1)">
        <div>游客画像</div>
      </div>
      <div class="dt_type dt_type_jq" @click="toTurn(2)"><div>景区</div></div>
      <div class="dt_type dt_type_jdms" @click="toTurn(3)">
        <div>酒店民宿</div>
      </div>
      <div class="dt_type dt_type_jt selected_right" @click="toTurn(4)">
        <div>交通</div>
      </div>
      <!-- 当前时间 -->
      <div class="dt_time">{{ currentTime }}</div>
      <!-- 中间文字隐藏区域用于点击切换首页 -->
      <div class="dt_click" @click="toTurn(0)"></div>
    </div>
    <!-- 中间区域 -->
    <div class="dp_middle">
      <!-- 中间区域的左边部分 -->
      <div class="dm_left">
        <div class="box dp_box">
          <div class="b_title">购票类型</div>
          <div class="db_content">
            <div class="chart" ref="ticketTypeReception"></div>
          </div>
        </div>
        <div class="box dp_box" style="height: 600px">
          <div class="b_title">今日航班</div>
          <div class="db_content">
            <div class="chart">
              <div class="Passengerflow" style="position: relative">
                <table class="flowTableHeader">
                  <tbody style="width: 100%">
                    <tr class="yearsHeader">
                      <th
                        v-for="(item, index) in yearsNumHeader"
                        :key="index"
                        @click="showSelect(index)"
                      >
                        {{ item }}
                      </th>
                    </tr>
                  </tbody>
                </table>
                <div class="tableData" style="width: 100%">
                  <vue-seamless-scroll
                    ref="vueSeamlessRef"
                    class="scroll-list-seamless"
                    :data="copyleftData"
                    :class-option="defaultOption"
                    style="width: 100%; padding: 0"
                  >
                    <ul style="width: 100%; padding: 0">
                      <li
                        v-for="(item, index) in leftData"
                        :key="index"
                        class="flowTableData"
                        style=""
                      >
                        <span>{{ item.lineNo }}次</span>
                        <span>{{ item.sailTime }}</span>
                        <span>{{ item.startPortName }}</span>
                        <span>{{ item.endPortName }}</span>
                        <span
                          v-if="item.stateName == '未开航'"
                          style="
                            color: #fe802c !important;
                            line-height: 24px;
                            text-align: center;
                            display: block;
                            width: 57px;
                            height: 24px;
                            background: url(https://i.ringzle.com/file/20231208/f9e913a648ab453da3af3a2f5f81162f.png)
                              no-repeat center;
                          "
                          >未开航</span
                        >
                        <span
                          v-if="item.stateName == '停航'"
                          style="
                            color: #ff4141;
                            line-height: 24px;
                            text-align: center;
                            display: block;
                            width: 57px;
                            height: 24px;
                            background: url(https://i.ringzle.com/file/20231208/2685d12977b642feb5e4757bbc3caab4.png)
                              no-repeat center;
                          "
                          >停航</span
                        >
                        <span
                          v-if="item.stateName == '已出发'"
                          style="
                            color: #3dd485;
                            line-height: 24px;
                            text-align: center;
                            display: block;
                            width: 57px;
                            height: 24px;
                            background: url(https://i.ringzle.com/file/20231208/2354a7ba927b4c36b45f499342a1a83a.png)
                              no-repeat center;
                          "
                          >已出发</span
                        >
                        <span
                          v-if="item.stateName == '大风待定'"
                          style="
                            color: #fe802c !important;
                            line-height: 24px;
                            text-align: center;
                            display: block;
                            width: 57px;
                            height: 24px;
                            background: url(https://i.ringzle.com/file/20231208/f9e913a648ab453da3af3a2f5f81162f.png)
                              no-repeat center;
                          "
                          >未开航</span
                        >
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div class="select" v-if="selectFlag == true">
                  <div class="triangle"></div>
                  <div
                    v-for="(item, index) in startPort"
                    :key="index"
                    @click="changeStartPort(item, index)"
                    :class="[
                      'select_item',
                      index == currentIndex ? 'selected_item' : '',
                    ]"
                  >
                    {{ item.portName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间区域的中间部分 -->
      <div class="dm_center">
        <div class="dmc_map">
          <div class="dmcm_nums">
            <div class="dn_pte">
              <div class="title">今日在岛人数(人)</div>
              <div class="nums">
                <div
                  class="n_item"
                  v-for="(num, idx) in onlineIslands"
                  :key="idx"
                >
                  {{ num }}
                </div>
              </div>
            </div>
            <div class="dn_pte">
              <div class="title">今日进岛人数(人)</div>
              <div class="nums">
                <div
                  class="n_item"
                  v-for="(num, idx) in enterIslands"
                  :key="idx"
                >
                  {{ num }}
                </div>
              </div>
            </div>
            <div class="dn_pte">
              <div class="title">今日出岛人数(人)</div>
              <div class="nums">
                <div
                  class="n_item"
                  v-for="(num, idx) in leaveIslands"
                  :key="idx"
                >
                  {{ num }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="box c_b_box">
          <!-- 标题 -->
          <div class="b_title">年度客流统计</div>
          <div class="db_content">
            <div class="chart" ref="ticketBook"></div>
          </div>
        </div>
      </div>
      <!-- 中间区域的右边部分 -->
      <div class="dm_right">
        <div class="box dp_box">
          <div class="b_title">船型接待统计</div>
          <div class="db_content">
            <div class="chart" ref="personShipReception"></div>
          </div>
        </div>
        <div class="box dp_box">
          <div class="b_title">今日入岛客流</div>
          <div class="db_content">
            <div class="chart">
              <div class="Passengerflow" style="position: relative">
                <table class="flowTableHeader">
                  <tbody style="width: 100%">
                    <tr class="yearsHeader">
                      <th
                        v-for="(item, index) in yearsNumHeader2"
                        :key="index"
                        @click="showSelect(index)"
                      >
                        {{ item }}
                      </th>
                    </tr>
                  </tbody>
                </table>
                <div class="tableData" style="width: 100%">
                  <vue-seamless-scroll
                    ref="vueSeamlessRef2"
                    class="scroll-list-seamless2"
                    :data="copyinIslandCountList"
                    :class-option="defaultOption"
                    style="width: 100%; padding: 0"
                  >
                    <ul style="width: 100%; padding: 0">
                      <li
                        v-for="(item, index) in inIslandCountList"
                        :key="index"
                        class="flowTableData"
                        style=""
                      >
                        <span>{{ item.startPortName }}</span>
                        <span>{{ item.endPortName }}</span>
                        <span
                          >{{ item.count || 0 }}(车：{{
                            item.carCount || 0
                          }})</span
                        >
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box dp_box">
          <div class="b_title">今日出岛客流</div>
          <div class="db_content">
            <div class="chart">
              <div class="Passengerflow" style="position: relative">
                <table class="flowTableHeader">
                  <tbody style="width: 100%">
                    <tr class="yearsHeader">
                      <th
                        v-for="(item, index) in yearsNumHeader2"
                        :key="index"
                        @click="showSelect(index)"
                      >
                        {{ item }}
                      </th>
                    </tr>
                  </tbody>
                </table>
                <div class="tableData" style="width: 100%">
                  <vue-seamless-scroll
                    ref="vueSeamlessRef3"
                    class="scroll-list-seamless3"
                    :data="copyoutIslandCountList"
                    :class-option="defaultOption"
                    style="width: 100%; padding: 0"
                  >
                    <ul style="width: 100%; padding: 0">
                      <li
                        v-for="(item, index) in outIslandCountList"
                        :key="index"
                        class="flowTableData"
                        style=""
                      >
                        <span>{{ item.startPortName }}</span>
                        <span>{{ item.endPortName }}</span>
                        <span
                          >{{ item.count || 0 }}(车：{{
                            item.carCount || 0
                          }})</span
                        >
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间动态背景地图 -->
    <div class="dp_map"></div>
    <!-- 乡镇地图标记点 -->
    <div
      class="map_town"
      :class="townIndex === index ? 'town_active' : ''"
      :style="town.style"
      v-for="(town, index) in townList"
      :key="index"
      @click="changeTown(town.no, index)"
    >
      {{ town.name }}
    </div>
    <!-- 底部区域 -->
    <div class="dp_bottom"></div>
    <table-div ref="mapDiv"></table-div>
  </v-scale-screen>
</template>
<script>
var sjTimer, refreshTimer;
import * as echarts from "echarts";
import "echarts-gl";
import tableDiv from "./tableJt";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
    tableDiv,
  },
  data() {
    return {
      // 头部
      qihouimg: "",
      tianqi: "",
      wendu: "",
      currentTime: "",
      routerCfg: {
        0: "/cockpit-home",
        1: "/cockpit-cockpitjd",
        2: "/cockpit-cockpitjj",
        3: "/cockpit-cockpityk",
        4: "/cockpit-cockpitjt",
      },
      // 中间区域
      onlineIslands: [],
      enterIslands: [],
      leaveIslands: [],
      // 地图岛屿
      myislandId: "",
      townList: [
        {
          id: ["4164678933"],
          no: ["1014"],
          name: "花鸟乡",
          style: { left: "1058px", top: "290px" },
        },
        {
          id: ["1721484186251956225", "1730426782508650497"],
          no: ["1028"],
          name: "洋山镇",
          style: { left: "614px", top: "495px" },
        },
        {
          id: ["5554544444"],
          no: ["1010"],
          name: "菜园镇",
          style: { left: "820px", top: "462px" },
        },
        {
          id: ["5554544444"],
          no: ["1019"],
          name: "五龙乡",
          style: { left: "1017px", top: "477px" },
        },
        {
          id: ["1346784662"],
          no: ["1017"],
          name: "枸杞乡",
          style: { left: "1180px", top: "501px" },
        },
        {
          id: ["4545454544"],
          no: ["1016"],
          name: "嵊山镇",
          style: { left: "1307px", top: "485px" },
        },
        {
          id: ["5645645645"],
          no: ["1034"],
          name: "黄龙乡",
          style: { left: "1054px", top: "612px" },
        },
      ],
      townIndex: null,
      leftData: [],
      copyleftData: [],
      yearsNumHeader: [
        "航班次",
        "开船时间",
        "出发港口 ▼",
        "到达港",
        "航班状态",
      ],
      yearsNumHeader2: ["出发港口", "到达港口", "客流量"],
      startPort: [],
      currentIndex: null,
      selectFlag: false,
      todayShipIngCount: 0,
      todayShipOutCount: 0,
      todayShipInCount: 0,
      inIslandCountList: [],
      outIslandCountList: [],
      copyinIslandCountList: [],
      copyoutIslandCountList: [],
    };
  },
  created() {
    this.getWeather();
    this.getCurrentTime();
    sjTimer = setInterval(() => {
      this.getCurrentTime();
    }, 1000);
    this.init();
    // refreshTimer = setInterval(() => {
    //   this.init();
    // }, 15000);
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  beforeDestroy() {
    clearInterval(sjTimer);
    clearInterval(refreshTimer);
  },
  methods: {
    showSelect(e) {
      if (e == 2) {
        this.selectFlag = !this.selectFlag;
      } else return;
    },
    changeStartPort(item, index) {
      this.currentIndex = index;
      this.getLeftTableData(item.portNum);
      this.selectFlag = false;
    },
    //出发港口
    getPortList() {
      this.$http.get("/travel/isshipport/listPort").then((res) => {
        if (res.data.code == 0) {
          this.startPort = res.data.data;
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    // 左下侧数据
    getLeftTableData(portNum) {
      this.$http
        .get("/sys/screen/ship/todayShipLine", {
          params: { portNo: portNum||this.myislandId },
        })
        .then((res) => {
          this.leftData =[];
          this.copyleftData=[];
          if (res.data.code == 0&&res.data.data) {
            this.leftData = res.data.data.totalLineList;
            this.$nextTick(() => {
              const scrollListDom = document.querySelector(
                ".scroll-list-seamless"
              );
              if (scrollListDom) {
                const scrollListDomLast =
                  scrollListDom.querySelectorAll("li")[
                    scrollListDom.querySelectorAll("li").length - 1
                  ];
                let liLength = scrollListDom.querySelectorAll("li").length;
                let liHeight = scrollListDomLast.clientHeight;
                let liSumHeight = liHeight * liLength;
                let parentHeight =
                  document.querySelector(".tableData").clientHeight;
                let autoPlay = liSumHeight > parentHeight;
                if (autoPlay) {
                  this.copyleftData = this.leftData;
                  this.$refs.vueSeamlessRef._startMove();
                }
              }
            });
          } else {
            this.$message(res.data.msg);
          }
        });
    },
    //今日入岛客流 + 今日出岛客流 + 今日入岛人数 + 今日出岛人数 + 今日在岛人数
    getInOutIslandCountNew() {
      this.$http
        .get("/sys/screen/ship/inOutIslandCountNew", {
          params: { portNo: this.myislandId },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.onlineIslands = [];
            this.enterIslands = [];
            this.leaveIslands = [];
            this.todayShipIngCount =
              (res.data.data.todayShipIngCount || 0) + "";
            this.todayShipOutCount =
              (res.data.data.todayShipOutCount || 0) + "";
            this.todayShipInCount = (res.data.data.todayShipInCount || 0) + "";
            this.inIslandCountList = res.data.data.inIslandCountList || [];
            this.outIslandCountList = res.data.data.outIslandCountList || [];
            for (let i = 0; i < this.todayShipIngCount.length; i++) {
              this.onlineIslands.push(this.todayShipIngCount.substr(i, 1));
            }
            for (let i = 0; i < this.todayShipInCount.length; i++) {
              this.enterIslands.push(this.todayShipInCount.substr(i, 1));
            }
            for (let i = 0; i < this.todayShipOutCount.length; i++) {
              this.leaveIslands.push(this.todayShipOutCount.substr(i, 1));
            }
            this.$nextTick(() => {
              const scrollListDom = document.querySelector(
                ".scroll-list-seamless2"
              );
              if (scrollListDom) {
                const scrollListDomLast =
                  scrollListDom.querySelectorAll("li")[
                    scrollListDom.querySelectorAll("li").length - 1
                  ];
                let liLength = scrollListDom.querySelectorAll("li").length;
                let liHeight = scrollListDomLast.clientHeight;
                let liSumHeight = liHeight * liLength;
                let parentHeight =
                  document.querySelector(".tableData").clientHeight;
                let autoPlay = liSumHeight > parentHeight;
                if (autoPlay) {
                  this.copyinIslandCountList = this.inIslandCountList;
                  this.$refs.vueSeamlessRef2._startMove();
                }
              }
              const scrollListDom2 = document.querySelector(
                ".scroll-list-seamless3"
              );
              if (scrollListDom2) {
                const scrollListDomLast =
                  scrollListDom2.querySelectorAll("li")[
                    scrollListDom2.querySelectorAll("li").length - 1
                  ];
                let liLength = scrollListDom2.querySelectorAll("li").length;
                let liHeight = scrollListDomLast.clientHeight;
                let liSumHeight = liHeight * liLength;
                let parentHeight =
                  document.querySelector(".tableData").clientHeight;
                let autoPlay = liSumHeight > parentHeight;
                if (autoPlay) {
                  this.copyoutIslandCountList = this.outIslandCountList;
                  this.$refs.vueSeamlessRef3._startMove();
                }
              }
            });
          } else {
            this.$message(res.data.msg);
          }
        });
    },
    //年度客流统计 + 船型接待统计 + 购票类型（游客、本地居民）
    getPersonCountAndTrendNew() {
      this.$http
        .get("/sys/screen/ship/personCountAndTrendNew", {
          params: { portNo: this.myislandId },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.setTicketBook(
              res.data.data.shipTrendYearMonth || [],
              res.data.data.shipTrendCountNowYear || [],
              res.data.data.shipTrendCountLastYear || []
            );
            // this.setPersonShipReception(res.data.data.personShipReception);
            this.setTicketType(res.data.data.ticketTypeReception);
            this.pie(res.data.data.personShipReception);
          }
        });
    },
    // 年度客流统计
    setTicketBook(
      shipTrendYearMonth,
      shipTrendCountNowYear,
      shipTrendCountLastYear
    ) {
      let myChart = echarts.init(this.$refs.ticketBook);
      let option = {
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 10,
          itemGap: 20,
          textStyle: {
            fontSize: 14,
            color: "#C6D7F1",
          },
          right: "5%",
          data: ["2024", "2023"],
          selectedMode: false,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
          textStyle: {
            color: "#fff",
          },
          formatter: "{b}：{c}",
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "1%",
          top: "18%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: shipTrendYearMonth,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, .8)",
            interval: 0,
            rotate: 30,
            margin: 15,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(45, 67, 119, 0.8)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位：人",
          nameTextStyle: {
            color: "#C6D7F1",
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(45, 67, 119, 0.8)",
            },
          },
          min: 0,
          axisLabel: {
            show: true,
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: "rgba(45, 67, 119, .5)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: shipTrendCountNowYear,
            name: "2024",
            type: "bar",
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#34ABFF",
                  },

                  {
                    offset: 1,
                    color: "#006BFE",
                  },
                ]),
              },
            },
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "#F5F5F5",
              offset: [0, -5],
              formatter: "{c}",
            },
          },
          {
            data: shipTrendCountLastYear,
            name: "2023",
            type: "bar",
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#89FCCC",
                  },

                  {
                    offset: 1,
                    color: "#00FF95",
                  },
                ]),
              },
            },
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "#F5F5F5",
              offset: [0, -5],
              formatter: "{c}",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //接待类型1
    pie(trafficWay) {
      let myChart = echarts.init(this.$refs.personShipReception);
      let data = [];
      let legendData = [];
      const color = ["#B111FF", "#0771FF", "#EA3D75", "#03FF96"];
      var optionRich = {
        a: {
          width: 60,
          fontSize: 14,
          fontWeight: 400,
          color: "#C6D7F1",
          lineHeight: 20,
          padding: [0, 20, 0, 0],
        },
      };
      for (var i = 0; i < trafficWay.length; i++) {
        let name = trafficWay[i].name;
        legendData.push(name);
        optionRich[i] = {
          width: 20,
          fontSize: 16,
          fontWeight: 400,
          lineHeight: 20,
          color: "#C6D7F1",
          align: "center",
        };
        data.push(
          {
            value: trafficWay[i].value,
            name: name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 10,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
          {
            value: 2, // 控制每个环形之间的间隙
            name: "",
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          }
        );
      }

      let option = {
        grid: {
          // 让图表占满容器
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px",
        },
        color: color,
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            right: "5%",
            top: "26%",
            icon: "circle",
            itemHeight: 8,
            itemWidth: 8,
            itemGap: 24,
            formatter: function (name) {
              let index = 0;
              let value = 0;
              let percentage = 0;
              trafficWay.forEach((item, i) => {
                if (item.name == name) {
                  value = item.value ? item.value : 0;
                  percentage = item.percentage ? item.percentage : 0;
                  index = i;
                }
              });
              return `{a|${name}}{${index}|${percentage}}`;
            },
            textStyle: {
              rich: optionRich,
            },
            data: data,
          },
        ],

        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockwise: false,
            radius: ["20%", "60%"],
            center: ["30%", "50%"],
            emphasis: {
              scale: false,
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
           {
            name: "外边框",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["30%", "50%"],
            radius: ["68%", "68%"],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                itemStyle: {
                  normal: {
                    borderWidth: 1,
                    borderColor: "#294178",
                    borderType: "solid",
                  },
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    //接待类型2
    setPersonShipReception(resultData) {
      //展示数据
      const optionData = [];
      //扇形图颜色数据
      const colorList = [
        { color1: "#B111FF" },
        { color1: "#0771FF" },
        { color1: "#EA3D75" },
        { color1: "#03FF96" },
      ];
      var optionRich = {
        a: {
          width: 60,
          fontSize: 14,
          fontWeight: 400,
          color: "#C6D7F1",
          lineHeight: 20,
          padding: [0, 20, 0, 0],
        },
      };
      resultData.forEach((ele, i) => {
        optionRich[i] = {
          width: 20,
          fontSize: 16,
          fontWeight: 400,
          lineHeight: 20,
          color: "#C6D7F1",
          align: "center",
        };
      });
      let data = resultData.map((item) => {
        return item.name;
      });

      let sum = 0;
      resultData.forEach((item) => {
        sum += item.value;
      });
      resultData.forEach((item) => {
        optionData.push({ value: item.value, name: item.name });
        optionData.push({
          name: "",
          value: sum / 200,
          itemStyle: { color: "transparent" },
        });
      });
      let myChart = echarts.init(this.$refs.personShipReception);
      let option = {
        backgroundColor: "",
        //你的代码
        legend: [
          {
            orient: "vertical",
            right: "5%",
            top: "26%",
            icon: "circle",
            itemHeight: 8,
            itemWidth: 8,
            itemGap: 24,
            formatter: function (name) {
              let index = 0;
              let value = 0;
              let percentage = 0;
              resultData.forEach((item, i) => {
                if (item.name == name) {
                  value = item.value ? item.value : 0;
                  percentage = item.percentage ? item.percentage : 0;
                  index = i;
                }
              });
              return `{a|${name}}{${index}|${percentage}}`;
            },
            textStyle: {
              rich: optionRich,
            },
            data: data,
          },
        ],
        tooltip: {
          trigger: "item",
          formatter(params) {
            let res = "";
            const { marker, name, value } = params;
            if (name !== "") {
              res += `${marker}${name}:${value}`;
            }
            return res;
          },
        },
        series: [
          {
            type: "pie",
            roseType: "radius",
            radius: ["20%", "60%"],
            center: ["30%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color(params) {
                  return colorList[parseInt(params.dataIndex / 2)].color1;
                },
              },
            },
            data: optionData,
          },
          {
            name: "外边框",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["30%", "50%"],
            radius: ["68%", "68%"],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                itemStyle: {
                  normal: {
                    borderWidth: 1,
                    borderColor: "#294178",
                    borderType: "solid",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    //购票类型
    setTicketType(ticketTypeReception) {
      let colors = ["#00A9FF", "#00D7E9"];
      let ticketTypeReceptionArr = ticketTypeReception.map((item, index) => {
        return {
          name: item.name,
          value: item.value,
          itemStyle: {
            opacity: 0.8,
            color: colors[index],
          },
        };
      });
      let myChart = echarts.init(this.$refs.ticketTypeReception);

      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
      function getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        h,
        i
      ) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.3 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
        let offsetZ = i == 1 ? 2 : 0;
        console.log("offsetX", i, offsetX, offsetY);
        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },

          x: function (u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function (u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY +
                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function (u, v) {
            if (u < -Math.PI * 0.5) {
              return offsetZ + Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return offsetZ + Math.sin(u);
            }
            // 调整扇形高度
            return offsetZ + (Math.sin(v) > 0 ? 0.1 * h : -1);
          },
        };
      }

      // 生成模拟 3D 饼图的配置项
      function getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let fakeData = 10;
        let legendData = [];
        let linesSeries = [];
        let k =
          typeof internalDiameterRatio !== "undefined"
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;

          let seriesItem = {
            name:
              typeof pieData[i].name === "undefined"
                ? `series${i}`
                : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k,
            },
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;

          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            true,
            false,
            k,
            // 调整扇形高度
            i === 0 ? 10 : 10,
            i
          );

          startValue = endValue;
          //计算label指示线的起始和终点位置
          let midRadian =
            (series[i].pieData.endRatio + series[i].pieData.startRatio) *
            Math.PI;
          let posX = Math.cos(midRadian) * (1.5 + Math.cos(Math.PI / 2));
          let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
          let posZ = Math.log(Math.abs(fakeData + 200)) * 0.1;
          let flag =
            (midRadian >= 0 && midRadian <= Math.PI / 2) ||
            (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2)
              ? 1
              : -1;
          let color = pieData[i].itemStyle.color;
          let turningPosArr = [
            posX * 1.8 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
            posY * 1.8 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
            posZ * 2,
          ];
          let endPosArr = [
            posX * 1.9 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
            posY * 1.9 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
            posZ * 6,
          ];
          linesSeries.push(
            {
              type: "line3D",
              lineStyle: {
                color: color,
              },
              data: [[posX, posY, posZ], turningPosArr, endPosArr],
            },
            {
              type: "scatter3D",
              label: {
                show: true,
                distance: -10,
                position: "center",
                textStyle: {
                  color: "#fff",
                  backgroundColor: "transparent",
                  fontSize: 12,
                  padding: 5,
                },
                formatter: "{b}人",
              },
              symbolSize: 0,
              data: [
                {
                  name: series[i].name + "\n" + series[i].pieData.value,
                  value: endPosArr,
                },
              ],
            }
          );

          legendData.push(series[i].name);
        }
        series = series.concat(linesSeries);
        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        option = {
          // tooltip: {
          //     formatter: params => {
          //         if (params.seriesName !== 'mouseoutSeries') {
          //             return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
          //         }
          //     }
          // },
          xAxis3D: {
            min: -1,
            max: 1,
          },
          yAxis3D: {
            min: -1,
            max: 1,
          },
          zAxis3D: {
            min: -1,
            max: 1,
          },
          grid3D: {
            show: false,
            boxHeight: 14,
            left: "-7%",
            top: "-5%",
            viewControl: {
              alpha: 20, // 视觉角度
              beta: 70, //绘制开始角度
              rotateSensitivity: 2, //扒拉灵敏度
              zoomSensitivity: 2, //缩放灵敏度
              panSensitivity: 1,
              autoRotate: false, //自动旋转开关
              distance: 230, //视觉距离
              autoRotateSpeed: 10, //自动旋转速度
            },
          },
          series: series,
        };
        return option;
      }

      // 传入数据生成 option
      let option = getPie3D(ticketTypeReceptionArr, 0);
      let that = this;
      myChart.on("click", function (params) {
        that.$nextTick(() => {
          that.$refs.mapDiv.init();
        });
      });
      // 使用更新后的 option，渲染图表
      myChart.setOption(option);
    },
    //3D饼图
    getWeather() {
      let that = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive("嵊泗县", function (err, data) {
          if (data.info == "OK") {
            that.tianqi = data.weather;
            that.wendu = data.temperature;
            if (data.weather.indexOf("晴") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png";
            } else if (data.weather.indexOf("暴雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png";
            } else if (data.weather.indexOf("暴雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png";
            } else if (data.weather.indexOf("冰雹") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png";
            } else if (data.weather.indexOf("大雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png";
            } else if (data.weather.indexOf("大雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png";
            } else if (data.weather.indexOf("多云") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png";
            } else if (data.weather.indexOf("雷阵雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png";
            } else if (data.weather.indexOf("雾") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png";
            } else if (data.weather.indexOf("小到中雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png";
            } else if (data.weather.indexOf("小雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png";
            } else if (data.weather.indexOf("雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png";
            } else if (data.weather.indexOf("阴") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png";
            } else if (data.weather.indexOf("雨夹雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png";
            } else if (data.weather.indexOf("阵雨@") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png";
            } else if (data.weather.indexOf("中到大雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png";
            } else if (data.weather.indexOf("中雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png";
            } else if (data.weather.indexOf("中雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png";
            } else if (data.weather.indexOf("霾") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png";
            }
          }
        });
      });
    },
    getCurrentTime() {
      this.currentTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
    },
    init() {
      this.getPortList();
      this.getLeftTableData("");
      this.getInOutIslandCountNew("");
      this.getPersonCountAndTrendNew("");
    },
    goBack() {
      this.$router.replace({ path: "/home" });
    },
    toTurn(type) {
      if (this.$route.path == this.routerCfg[type]) return;
      this.$router.push({ path: this.routerCfg[type] });
    },
    // 获取在岛、进岛、出岛人数
    getIslandUsers() {},
    //解决图表鼠标悬浮错位问题
    resizeEcharts(ele) {
      let rate = 1920 / window.innerWidth;
      if (ele.style) {
        ele.style.zoom = 1 * rate;
        ele.style.transform = `scale(${1 / rate})`;
        ele.style.transformOrigin = "top left";
      }
    },
    //切换岛屿
    changeTown(no, index) {
      this.townIndex = index;
      if (!no) return;
      this.myislandId = no;
      this.init();
      clearInterval(refreshTimer);
      refreshTimer = setInterval(() => {
        this.init();
      }, 15000);
    },
  },
};
</script>
<style scoped lang="scss">
.screen-box {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
  background-image: url(../../../assets/largescreen/new/bg_zong.png) !important;
  background-size: 100% 100%;

  .screen-wrapper {
    position: relative;
    .dp_map {
      width: 980px;
      height: 980px;
      background-image: url(../../../assets/largescreen/new/m_map_bg.png);
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -490px;
    }

    .map_town {
      width: 68px;
      height: 41px;
      background: url("../../../assets//largescreen/town_bg.png");
      position: absolute;
      font-size: 14px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      padding-top: 6px;
      cursor: pointer;
      &.town_active {
        width: 84px;
        height: 78px;
        font-size: 16px;
        background: url("../../../assets//largescreen/town_active_bg.png");
        padding-top: 7px;
        margin-left: -8px;
        margin-top: -37px;
      }
    }
  }

  .dp_top {
    width: 100%;
    height: 118px;
    background-image: url(../../../assets/largescreen/new/top_title.png);
    background-position: center center;
    background-size: 100% 100%;
    position: relative;

    .dt_back_weather {
      position: absolute;
      top: 18px;
      left: 39px;
      display: flex;
      align-items: center;
      .dbw_fh {
        width: 102px;
        height: 38px;
        cursor: pointer;
      }
      .dbw_tianqi {
        display: flex;
        align-items: center;
        margin-left: 19px;
        img {
          width: 24px;
          height: 22px;
        }
        .tianqi {
          margin-left: 6px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #c6d7f1;
          line-height: 22px;
        }
      }
    }

    .dt_type {
      width: 180px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-position: center center;
      background-size: 100% 100%;
      position: absolute;
      top: 52px;
      cursor: pointer;
      z-index: 3;
      & > div {
        font-family: YouSheBiaoTiHei;
        font-size: 20px;
        color: #ffffff;
      }
      &.selected_left {
        background-image: url(../../../assets/largescreen//new/top_text_bg_selected_left.png);
      }
      &.selected_right {
        background-image: url(../../../assets/largescreen//new/top_text_bg_selected_right.png);
      }
    }
    .selected_left,
    .selected_right {
      & > div {
        background-image: linear-gradient(to bottom, #ffffff 0%, #90deff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .dt_type_ykhx,
    .dt_type_jq {
      background-image: url(../../../assets/largescreen//new/top_text_bg1.png);
    }
    .dt_type_jdms,
    .dt_type_jt {
      background-image: url(../../../assets/largescreen//new/top_text_bg2.png);
    }
    .dt_type_ykhx {
      left: 200px;
    }
    .dt_type_jq {
      left: 380px;
    }
    .dt_type_jdms {
      right: 380px;
    }
    .dt_type_jt {
      right: 200px;
    }

    .dt_time {
      position: absolute;
      top: 26px;
      right: 37px;
      font-family: DS, DS;
      font-size: 20px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      background-image: linear-gradient(to bottom, #fafcff 0%, #44a7fe 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .dt_click {
      width: 670px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -335px;
      cursor: pointer;
      z-index: 2;
    }
  }

  .dp_middle {
    width: 100%;
    height: calc(100% - 165px);
    display: flex;
    .dm_left,
    .dm_right {
      width: 470px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .dm_left {
      padding: 0 24px 0 26px;
    }
    .dm_center {
      width: calc(100% - 940px);
      position: relative;
      .dmc_map {
        padding: 26px 23px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .dmcm_nums {
          display: flex;
          .dn_pte {
            display: flex;
            flex-direction: column;
            align-items: center;
            &:nth-child(2) {
              margin: 0 80px;
            }
            .title {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 16px;
              color: #c6d7f1;
              line-height: 22px;
            }
            .nums {
              display: flex;
              .n_item {
                width: 40px;
                height: 56px;
                line-height: 56px;
                text-align: center;
                background: url(../../../assets/largescreen/num_bg.png)
                  no-repeat;
                background-size: 100% 100%;
                margin: 5px 2px 0 2px;
                font-size: 30px;
                font-family: D-DINExp, D-DINExp;
                font-weight: bold;
                color: #c6d7f1;
                &:first-child {
                  margin-left: 0;
                }
              }
            }
          }
        }
      }
    }
    .dm_right {
      padding: 0 26px 0 24px;
    }
  }

  .dp_bottom {
    width: 100%;
    height: 47px;
    background-image: url(../../../assets/largescreen/new/bg_bottom.png);
    background-position: center center;
    background-size: 100% 100%;
  }

  .box {
    position: relative;
    background: linear-gradient(
        180deg,
        rgba(7, 27, 67, 0.1) 0%,
        rgba(13, 46, 89, 0.2) 100%
      ),
      radial-gradient(
        82% 15% at 50% 100%,
        rgba(39, 115, 255, 0.1) 0%,
        rgba(39, 115, 255, 0) 100%
      );
    .b_title {
      width: 420px;
      height: 44px;
      background: url("../../../assets/largescreen/y6.png") no-repeat;
      padding-left: 33px;
      line-height: 36px;
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      color: #ffffff;
    }
    &.c_b_box {
      width: 100%;
      height: 300px;
      padding: 0 20px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .dp_box {
    width: 420px;
    height: 300px;
    background: linear-gradient(
        180deg,
        rgba(7, 27, 67, 0.1) 0%,
        rgba(13, 46, 89, 0.2) 100%
      ),
      radial-gradient(
        82% 15% at 50% 100%,
        rgba(39, 115, 255, 0.1) 0%,
        rgba(39, 115, 255, 0) 100%
      );
    position: relative;
  }

  .db_content {
    width: 100%;
    height: calc(100% - 40px);
    .chart {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 998;
    }
  }
}
.ul-scoll {
  padding-left: 0;
}

.selected_item {
  color: #0096ff !important;
}

.select::-webkit-scrollbar {
  background-color: transparent;
}

.select::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.select::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f1f1;
}
.Passengerflow {
  flex-direction: column;
  width: 100%;
  height: calc(100% - 8px);
  background: linear-gradient(
    270deg,
    rgba(39, 115, 255, 0.4) 0%,
    rgba(39, 115, 255, 0.25) 23%,
    rgba(39, 115, 255, 0.06) 100%
  );
  border-radius: 2px;
  border: 1px solid #294178;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;

  .flowTableHeader {
    display: flex;
    align-items: center;
    height: 42px;
    width: 100%;
    background: linear-gradient(180deg, #062156 0%, #0b3975 100%);
    color: #c6d7f1;
    font-weight: normal;
    font-size: 12px;
    position: absolute;
    top: 0;

    .yearsHeader {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }
  }

  .tableData {
    overflow: hidden;
    position: absolute;
    top: 42px;
    height: calc(100% - 42px);

    .flowTableData {
      span {
        // width: 20%;
        line-height: 42px;
        align-items: center;
        text-align: center;
      }

      padding: 0 10px;
      width: 100%;
      margin: 5px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 42px;
      width: 100%;
      background: linear-gradient(180deg, #062156 0%, #0b3975 100%);
      color: #c6d7f1;
      font-weight: normal;
      font-size: 12px;
    }
  }

  .select {
    left: 35%;
    position: absolute;
    top: 39px;
    max-height: 337px;
    min-width: 210px;
    border: 1px solid #065691;
    background: #0a2840;
    overflow: auto;

    .triangle {
      position: relative;
      left: 35%;
      top: -10px;
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      /* 左边透明 */
      border-right: 7px solid transparent;
      /* 右边透明 */
      border-bottom: 10px solid #065691;
    }

    .select_item {
      cursor: pointer;
      width: 100%;
      height: 34px;
      background: #0a2840;
      border-bottom: 1px solid #053c63;
      color: white;
      line-height: 34px;
      padding: 0 30px;
    }
  }
}
</style>